<template>
	<view class="pages">
		<view class="settings">
			<view class="settingsItems" v-for="(t,index) in ScoreboardTypeData" :key="index"
				:class="[ libarytypeindex == index ? 'settingsItemszhong' : '']" @click="settingsItems(t,index)">
				{{t.text}}
			</view>
		</view>

		<view class="selectBoxsss">
			<view class="selectBoxItemssss" @click.stop="selectyearshow = true">
				<image src="../../../static/date.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 15rpx;">
				</image>
				<view class="tips">

					{{yeartips ? yeartips : this.$t('SelectTPreportYear')}}
					<image v-if="yeartips" src="../../../static/qingchu.png" mode=""
						style="width: 30rpx;height: 30rpx;margin-left: 15rpx;" @click.stop="clearDate('yeartips')">
					</image>
				</view>
				<u-icon name="arrow-down" v-if="selectyearshow == false"></u-icon>
				<u-icon name="arrow-up" v-else></u-icon>
			</view>


			<view class="selectBoxItemssss" @click.stop="mothhow = true">
				<image src="../../../static/date.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 15rpx;">
				</image>
				<view class="tips">

					{{monthTips ?  AllShow(monthTips) : this.$t('SelectTPreportMonth')}}
					<image v-if="monthTips" src="../../../static/qingchu.png" mode=""
						style="width: 30rpx;height: 30rpx;margin-left: 15rpx;" @click.stop="clearDate('monthTips')">
					</image>
				</view>
				<u-icon name="arrow-down" v-if="mothhow == false"></u-icon>
				<u-icon name="arrow-up" v-else></u-icon>
			</view>
	
		</view>
		
		<!-- 选择年份 -->
			<u-picker :show="selectyearshow" :columns="yearcolumns" keyName="label" :confirmText="$t('Confirm')"
				:cancelText="$t('Cancel')" @confirm="selectyearconfirm" @cancel="selectyearshow = false"></u-picker>
			<!-- 选择月份 -->
		<u-picker :show="mothhow" :columns="monthcolumns" keyName="label" :confirmText="$t('Confirm')"
			:cancelText="$t('Cancel')" @confirm="mothconfirm" @cancel="mothhow = false"></u-picker>
		<mescroll-uni @init="mescrollInit" :top="370" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="itemsll" v-for="(items,index) in dadaList">
					<view class="type1" v-if="items.type == 'total'">
						<view class="itemsLeft">
							<image src="../../../static/orderlist.png" mode="" style="width: 120rpx;height:120rpx;">
						</view>
						<view class="itemsCenter">
							<view class="itemsCenterT">
								Total TP: ${{$formatNumberWithCommas(items.total ? items.total : 0)}}
							</view>
							<view class="itemsCenterB">
								
							</view>
							<view class="itemsCenterB">
							</view>
						</view>
					</view>
					<view class="type2" v-else>
						<view class="itemsLeft">
							<image src="../../../static/orderlist.png" mode="" style="width: 120rpx;height:120rpx;">
						</view>
						<view class="itemsCenter">
							<view class="itemsCenterT">
							{{hotLength(items.real_name,25) || ''}}
							</view>
							<view class="itemsCenterB">
							ID : {{items.user_id || ''}}
							</view>
							<view class="itemsCenterB">
							${{ $formatNumberWithCommas(items.active_tp ? items.active_tp : 0)}}
							</view>
							<view class="itemsCenterB">
							</view>
						</view>
					</view>
			</view>
		</mescroll-uni>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				libarytypeindex: 0,
				ScoreboardTypeData: [{
					id: 1,
					text: "Personal TP"
				}, {
					id: 2,
					text: "Baseshop TP"
				}, {
					id: 3,
					text: "Superbase TP"
				}, {
					id: 4,
					text: "Infinity TP"
				}],
				date: '',
				newUrl: 1, //0为新接口1为老接口
				dadaList: [],
				yearcolumns: [],
				yeartips:'',
				monthcolumns: [],
				monthTips:"",
				monthID:'',
				selectyearshow: false,
				mothhow: false,

				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "24rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.getDatesall()
			this.getList()
		},
		methods: {
			AllShow(val) {
				if (val == 'ALL') {
					return this.$t('ALL')
				} else {
					return val
				}
			},
			// 切换分类
			settingsItems(t, index) {
				this.libarytypeindex = index
				this.getList()
				this.getDatesall()
			},
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
				this.getDatesall()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},

			// 获取数据
			async getList() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				const res = await this.$get(`/backend/OrderPer/tp`, {
					page: this.pager.currentPage,
					perPage: this.pager.maxResultCount,
					year: this.yeartips,
					month: this.monthID,
					cate_id: this.libarytypeindex + 1,
					real_name: ''
				}, this.newUrl)
				console.log(res, 'res');
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dadaList = []
					}
					
					if (this.libarytypeindex != 0) {
						let data = this.dadaList.concat(res.data.data.list)
						this.dadaList = data.map( items => {
							return {
								user_id: this.libarytypeindex == 1 ? items.user_id : items[0].user_id,
								real_name:this.libarytypeindex == 1 ? items.real_name : items[0].real_name,
								active_tp:this.libarytypeindex == 1 ? items.active_tp : items[0].active_tp
							}
						})
						this.dadaList.sort(function (a,b) {
							return b.active_tp - a.active_tp;
						})
						let total_tpS = 0;
						this.dadaList.forEach(t => {
							total_tpS += Number(t.active_tp)
						})
						console.log(total_tpS,'tp总和为');
						this.dadaList.push({
							type:"total",
							total:total_tpS.toFixed(2)
							
						})
					} else {
						this.dadaList = this.dadaList.concat(res.data.data.list)
						let total_tp = 0;
						this.dadaList.forEach(t => {
							total_tp += Number(t.active_tp)
						})
						this.dadaList.push({
							type:"total",
							total:total_tp.toFixed(2)
						})
					}
				}
				this.mescroll.endBySize(res.data.data.list.length, res.data.data.total)
			},
			getDatesall() {
				var timestamp = Date.now();
				let date = new Date(timestamp)
				let year = date.getFullYear().toString().padStart(2, '0')
				let month = (date.getMonth() + 1).toString().padStart(2, '0')
				this.yearcolumns = [[{label:year,id:year},{label:year - 1,id:year - 1}]]
				let yue = []
				for (let i = 1; i < 13 ; i++) {
					let arr = {}
					arr.label = i 
					arr.id = i
					yue.push(arr)
				}
				yue.push({
					label:'ALL',
					id:''
				})
				this.monthcolumns = [yue]
			},
			// 选择年份
			selectyearconfirm(e) {
				this.yeartips = e.value[0].label
				this.selectyearshow = false
				this.getList()
			},
			mothconfirm(e) {
				this.monthTips = e.value[0].label 
				this.monthID = e.value[0].id
				this.mothhow = false
				this.getList()
			},
			// 文字超出打点
			hotLength(val,len){
				if ( val.length > len) {
					return `${val.substring(0,len)}...`
				} else {
					return val
				}
			},
			// 重置时间
			clearDate(val) {
				if (val == 'yeartips') {
					this.yeartips = ''
				} else {
					this.monthID = ''
					this.monthTips = ''
				}
				this.getList()
			},

		},

	}
</script>

<style scoped>
	.pages {
		width: 100%;
		height: 100vh;
		/* overflow-y: auto; */
		background-color: #F0F0F0;
		padding: 0 10rpx;
		box-sizing: border-box;

	}

	.settings {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 32rpx;
	}

	.settingsItems {
		width: 40%;
		height: 64rpx;
		background-color: #fff;
		line-height: 64rpx;
		font-family: Montserrat;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #273562;
		padding: 0 20rpx;
		border-radius: 32rpx;
		margin-bottom: 20rpx;
	}

	.settingsItemszhong {
		background-color: #273562;
		color: #fff;
	}

	.selectBoxsss {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		height: 64rpx;
		margin-bottom: 20rpx;
	}

	.selectBoxItemssss {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15rpx;
		box-sizing: border-box;
		width: 45%;
		height: 100%;
		background-color: #fff;
		border-radius: 16rpx;
		/* margin-left: 20rpx; */
	}


	.tips {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 250rpx;
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 10px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		color: #808080;
	}

	.itemsll {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* padding-right: 10rpx; */
		width: 700rpx;
		height: 168rpx;
		background-color: #fff;
		/* margin-bottom: 12rpx; */
		margin: 0 auto 12rpx;
		box-sizing: border-box;
		/* border-left: 16rpx solid #273562; */
	}
	.type1,.type2 {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-right: 10rpx;
		width: 700rpx;
		height: 168rpx;
		background-color: #fff;
		/* margin-bottom: 12rpx; */
		/* margin: 0 auto 12rpx; */
		box-sizing: border-box;
		border-left: 16rpx solid #273562;
	}
	.items:last-child {
		/* margin-bottom: 120rpx; */
		/* background-color: #73E11D; */
	}

	.itemsLeft {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		/* width: 150rpx;
		height: 150rpx; */
		margin: 0 20rpx 0 10rpx;
	}

	.itemsCenter {
		width: 495rpx;

	}

	.itemsCenterT {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}

	.itemsCenterB {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}
	
	.itemsCenterB:nth-child(2) {
		margin: 10rpx 0;
	}
	.itemsRight {
		width: 120rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 16rpx;
		font-family: Inter;
		font-size: 24rpx;
		font-weight: 700;
		text-align: center;
		color: #fff;
		background-color: #73E11D;
		padding: 6rpx 10rpx;
	}

	.RX {
		width: 56rpx;
		height: 56rpx;
		position: absolute;
		right: 5rpx;
		bottom: 5rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	.serachBox {
		width: 100%;
		height: 64rpx;
		margin-top: 26rpx;
	}

	.addItemsStyle {
		display: flex;
		align-items: center;
		background-color: #273562;
		color: #fff;
	}

	.submitted {
		background-color: #273562;
	}

	.orderTypeStyle {
		background-color: #273562;
		color: #F0F0F0;
	}
</style>